<template>
	<view class="my-search-container">
		<uni-search-bar 
		v-if="isShowInput" 
		class="my-search-bar"  
		:radius="100" 
		:bgColor="config.backgroundColor" 
		:placeholder="placeholderText" 
		:value="value"
		@confirm="onSearch"
		@clear="onClear"
		@blur="onBlur"
		@focus="onFocus"
		@cancel="onCancel"
		@input="onInput"
		>
			<uni-icons slot="clearIcon" type="clear" color="#999999"></uni-icons>
			</uni-search-bar>
		<view class="my-search-box" v-else :style="{
			height:config.height + 'px',
			backgroundColor:config.backgroundColor,
			border:config.border
		}">
			<image class="icon" :src="config.icon"/>
			<text class="placeholder" :style="{color: config.textColor}">{{placeholderText}}</text>
		</view>	
	</view>
</template>

<script>
	export default {
		name:"my-search",
		props:{
			//输入的内容
			value:{
				value:String
			},
			//是否现实输入框
			isShowInput:{
				type:Boolean,
				default:false
			},
			config:{
				type:Object,
				default:()=>({
					height:36,
					backgroundColor: "#ffffff",
					icon:"/static/images/search.png",
					textColor:"#454545",
					border:'1px solid #c9c9c9',
				})
			},
			placeholderText:{
				type:String,
				default:"搜索"
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			//点击搜索按钮时被触发
			onSearch(){
				this.$emit('search',this.value)
			},
			//获取焦点时被触发
			onFocus(){
				this.$emit('focus',this.value)
			},
			//失去焦点时被触发
			onBlur(){
				this.$emit('blur',this.value)
			},
			//清空输入框时被触发
			onClear(){
				this.$emit('clear',this.value)
			},
			//value改变时被触发
			onInput(val){
				//通知父组件
				this.$emit('input',val)
			},
			//点击取消按钮时被触发
			onCancel(){
				this.$emit('cancel',this.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
.my-search-container {
  display: flex;
  align-items: center;
  .my-search-bar {
    width: 100%;
  }
  .my-search-box {
    height: 36px;
    background-color: #ffffff;
    border-radius: 15px;
    border: 1px solid #c9c9c9;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 $uni-spacing-row-base;

    .icon {
      width: $uni-img-size-sm;
      height: $uni-img-size-sm;
    }

    .placeholder {
      font-size: $uni-font-size-sm;
      margin-left: $uni-spacing-row-sm;
      color: #454545;
    }
  }
}
</style>

